<!--
 * @Date: 2023-11-14 10:09:45
 * @LastEditTime: 2023-12-08 16:50:43
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      title="签到任务"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view class="page-hd">
      <view class="title">
        签到任务
        <text>
          (您已累计签到
          <text>{{ (signData && signData.days) || 0 }}</text>
          天)
        </text>
      </view>

      <view class="icon" @click="$refs.rulePop.getRule(16, '签到规则')">
        <image :src="$img('/static/img2/cc26.png')" lazy-load></image>
      </view>
    </view>

    <view
      v-if="signData"
      class="sign-box common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc21.png')})`
      }"
    >
      <template v-for="(item, i) in signData.sign_info">
        <view
          v-if="i < 6"
          class="sign-item"
          :key="i"
          :class="{
            act: i + 1 <= signData.days
          }"
        >
          <view class="day">{{ i + 1 }}天</view>

          <view
            class="icon"
            :class="{
              act: i + 1 <= signData.days
            }"
          >
            <image :src="$img('/static/img2/cc187.png')" lazy-load></image>
          </view>

          <view class="num">{{ item }}积分</view>
        </view>

        <view
          v-else
          class="sign-item large"
          :key="i"
          :class="{
            act: i + 1 <= signData.days
          }"
        >
          <view class="day">{{ i + 1 }}天</view>

          <view
            class="icon"
            :class="{
              act: i + 1 <= signData.days
            }"
          >
            <image :src="$img('/static/img2/cc187.png')" lazy-load></image>
          </view>

          <view class="num">{{ item }}积分</view>
        </view>
      </template>
    </view>

    <view
      class="sign-btn c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc19.png')})`
      }"
      @click="doSign"
    >
      立即签到
    </view>

    <uni-popup
      ref="sucPop"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
    >
      <view v-if="sucData" class="suc-pop">
        <view class="suc-title">恭喜您获得</view>

        <view class="coin icon">
          <image :src="$img('/static/img2/cc187.png')" lazy-load></image>
        </view>

        <view class="coin-num">恭喜获得 {{ sucData.num }} 积分</view>

        <view class="close icon" @click="$refs.sucPop.close()">
          <image :src="$img('/static/img2/cc158.png')" lazy-load></image>
        </view>
      </view>
    </uni-popup>

    <rule-pop ref="rulePop"></rule-pop>
  </view>
</template>

<script>
export default {
  data() {
    return {
      signData: [],
      sucData: ''
    }
  },

  onLoad(options) {
    this.getData()
  },

  onReady() {
    // this.$refs.sucPop.open()
  },

  methods: {
    doSign() {
      this.req({
        url: 'sign_add',
        data: {},
        success: res => {
          if (res.status == 1) {
            this.sucData = res.data

            this.$refs.sucPop.open()

            this.getData()
          }
        }
      })
    },

    getData() {
      this.req({
        url: 'sign',
        data: {},
        success: res => {
          if (res.status == 1) {
            this.signData = res.data.sign
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 1rpx 0 40rpx;

  .page-hd {
    padding: 20rpx 30rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 32rpx;
      color: #e40d1d;
      text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;

      text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #ffffff;
        text-shadow: none;

        text {
          color: #e40d1d;
        }
      }
    }

    .icon {
      width: 98rpx;
      height: 44rpx;
    }
  }

  .sign-box {
    width: 690rpx;
    box-sizing: border-box;
    padding: 1rpx 20rpx 20rpx;
    margin: 30rpx auto 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .sign-item {
      width: 150rpx;
      height: 192rpx;
      box-sizing: border-box;
      background: #111111;
      box-shadow: inset 0rpx 0rpx 0rpx 6rpx #e40d1d;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #ffffff;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 20rpx;

      .day {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .icon {
        width: 50rpx;
        height: 50rpx;
        filter: grayscale(0.7);

        &.act {
          filter: grayscale(0);
        }
      }

      .num {
        font-size: 20rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      // &.act {
      //   .day,
      //   .num {
      //     color: #222222;
      //   }
      // }

      &.large {
        width: 316rpx;
        height: 192rpx;
        // flex-flow: row nowrap;
        // justify-content: space-around;
        // align-items: center;

        // .icon {
        //   width: 88rpx;
        //   height: 50rpx;
        // }
      }
    }
  }

  .sign-btn {
    margin: 40rpx auto 0;
    width: 500rpx;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  }

  .suc-pop {
    width: 100vw;
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;

    .suc-title {
      padding-top: 30rpx;

      font-size: 60rpx;
      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      color: #e40d1d;
      text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
    }

    .coin {
      margin: 100rpx;
      width: 190rpx;
      height: 190rpx;
    }

    .coin-num {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }

    .close {
      width: 196rpx;
      height: 78rpx;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 200%);
    }
  }
}
</style>
